<!DOCTYPE html>
<html>
    <head>
        <title>qq空间相册</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            *{margin: 0;padding: 0;list-style-type: none;text-decoration: none;}
            #div1{width:100%;height:100%;position: absolute;background: #000;opacity:0;}
            ul{width:1000px;height:290px;position: absolute;left:50%;top:50%;margin:-135px 0 0 -480px;border:5px solid #000;}
            li{width:240px;height: 135px;float: left;border:5px solid #fff;cursor: pointer;}
            li:hover{width:250px;height: 145px;border:none;}
            li img{width:100%;height: 100%;}
            #div2{width:960px;height:540px;position:relative;border:5px solid #000;margin:auto;display: none;}
            #div2 img{width:100%;height: 100%;}
            a{height:100px;width:80px;background:#ccc;color:#f00;line-height:100px;font-size:18px;text-align: center;}
            .left{position: absolute;left:-85px;top:50%;margin-top:-50px; }
            .right{position: absolute;right:-85px;top:50%;margin-top:-50px; }
        </style>
    </head>
    <body>
        <div id="div1"></div>
            <ul>
                <li><img src="img/1.jpg" alt=""></li>        
                <li><img src="img/2.jpg" alt=""></li>
                <li><img src="img/3.jpg" alt=""></li>    
                <li><img src="img/4.jpg" alt=""></li>
                <li><img src="img/5.jpg" alt=""></li>
                <li><img src="img/6.jpg" alt=""></li>
                <li><img src="img/7.jpg" alt=""></li>
                <li><img src="img/8.jpg" alt=""></li>
            </ul>
            <div id="div2"><img src="img/1.jpg" alt="">
             <a href="javascript:;" class="left">left</a>
            <a href="javascript:;" class="right">right</a>
            </div>   
        <script src="js/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            var index=0;
            $("ul li").click(function(){
                index=$(this).index();
                var src = $(this).children().attr("src");
                $("#div2 img").attr({"src":src});
                $("ul").fadeOut(2000);
                $("#div1").animate({"opacity":"0.5"},2000);
                $("#div2").fadeIn(2000);
            });
            $("#div1").click(function(){
            $("#div2").fadeOut(2000); 
            $("#div1").animate({"opacity":"0"},2000);
               $("ul").fadeIn(2000);
            });
            $(".left").click(function(){
               index--;
               auto();
            });
             $(".right").click(function(){
               index++;
               auto();
            });
            function auto(){
                if(index<0){
                   index=7;
               }else 
                if(index>7){
                   index=0;
               } 
           $("ul li").eq(index).click();
            };
        </script>
    </body>
</html>
